import React, { Component, ComponentClass } from 'react';
import {AtIcon, AtSearchBar} from 'taro-ui'
import {View, Navigator} from '@tarojs/components'
import {CityLocation as CityLocationType} from '../../../utils/server.interface'
import './city-search-location.scss'

type PageStateProps = {
  location: CityLocationType
}
type PageDispatchProps = {}
type PageOwnProps = {
  placeholder?: any
  areaName?: any
  maxLength?: any
  onChange?: any
  onConfirm?: any
  inputType?: any
  onClear?: any
}
type PageState = {}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface CityLocation {
  props: IProps
}

class CityLocation extends Component {
  state: {
    value: any
  } = {
    value: ''
  }

  onChange(value) {
    this.setState({
      value: value
    })
    this.props.onChange(value);
  }

  onActionClick() {
    this.props.onConfirm();
  }

  onClear() {
    this.setState({value: ''})
    this.props.onClear && this.props.onClear();
  }

  render() {
    const {areaName, placeholder, maxLength, inputType} = this.props
    const {value} = this.state
    return (<View>
        <View className='city-search-location'>
          <Navigator className='search-left-city'
            url='/other/select-city/select-city'
          ><View>{areaName || '全国'}</View><View
            className='icon'
          ><AtIcon value='chevron-down' size='12' /></View>
          </Navigator>
          <View style='width: 100%'>
            <AtSearchBar inputType={inputType || 'text'} maxLength={maxLength} value={value} placeholder={placeholder || '搜索关键词'}
              onActionClick={this.onActionClick.bind(this)} onClear={this.onClear.bind(this)}
              onConfirm={this.onActionClick.bind(this)} onChange={this.onChange.bind(this)}
            />
          </View>
        </View>
      </View>
    )
  }
}

export default CityLocation as ComponentClass<PageOwnProps, PageState>
